<template>
  <div class="mod-config" ref="main">
    <el-collapse>
      <el-collapse-item>
        <template slot="title">
          <span class="span_title">项目基本信息</span>
        </template>
        <div style="background-color: #f0f0f0">
          <div><strong>项目名称：</strong>{{projectInfo.projectName}}</div>
          <div><strong>项目类型：</strong>{{projectInfo.projectType}}</div>
          <div><strong>委托单位：</strong>{{projectInfo.projectAuthorize}}</div>
          <div><strong>委托要求：</strong>{{projectInfo.projectNote}}</div>
          <div><strong>生产负责人：</strong>{{projectInfo.projectProduce}}</div>
          <div><strong>业务负责人：</strong>{{projectInfo.projectBusiness}}</div>
          <div><strong>项目负责人：</strong>{{projectInfo.projectCharge}}</div>
          <div><strong>工作内容：</strong>{{projectInfo.workNote}}</div>
          <div><strong>工作要求：</strong>{{projectInfo.workRequire}}</div>
          <div><strong>工作小结：</strong>{{projectInfo.briefSummary}}</div>
          <div style="display:flex;padding-bottom: 4px;"><strong>项目清单：</strong>
            <el-table :data="projectInfo.projectBillList" border >
              <el-table-column prop="billName" header-align="center" align="center" label="项目" ></el-table-column>
              <el-table-column prop="spec" header-align="center" align="center" label="规格"></el-table-column>
              <el-table-column prop="num" header-align="center" align="center" label="数量" ></el-table-column>
              <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="title_line">
            <div>
              <span class="span_title">客户签收情况</span>
              <el-tag v-if="sitEntity.isSign" type="primary">已签收</el-tag>
              <el-tag v-else type="info">未签收</el-tag>
            </div>
            <div>
              <el-button type="primary" size="small" icon="el-icon-edit" v-if="sitEntity.isAach" @click="editClientHandle">编辑签收</el-button>
            </div>
          </div>
        </template>
        <div style="background-color: #f0f0f0;padding: 5px;">
          <div><strong>客户公司名称：</strong>{{achInfo.clientName}}</div>
          <div><strong>客户联系电话：</strong>{{achInfo.clientPhone}}</div>
          <div class="sig_line">
            <div><strong>客户单位签字：</strong></div>
            <el-image class="img_cap" :src="'data:image/png;base64,' + achInfo.signature"></el-image>
          </div>
          <div style="display:flex;padding-bottom: 4px;">
            <strong>满意度调查表：</strong>
            <table border="1" cellspacing="0" cellpadding="0" class="sig_table">
              <tr><th colspan="4">1、测绘项目成果质量：</th></tr>
              <tr>
                <td v-for="item in surveyItems">
                  <span v-if="item.value === achInfo.gradeQuality" class="redspan">☑{{item.name}}</span>
                  <span v-else>{{item.name}}</span>
                </td>
              </tr>
              <tr><th colspan="4">2、测绘项目成果满足要求程度：</th></tr>
              <tr>
                <td v-for="item in surveyItems">
                  <span v-if="item.value === achInfo.gradeRequire" class="redspan">☑{{item.name}}</span>
                  <span v-else>{{item.name}}</span>
                </td>
              </tr>
              <tr><th colspan="4">3、工作中工作人员协调交流和工作态度：</th></tr>
              <tr>
                <td v-for="item in surveyItems">
                  <span v-if="item.value === achInfo.gradeAttitude" class="redspan">☑{{item.name}}</span>
                  <span v-else>{{item.name}}</span>
                </td>
              </tr>
              <tr><th colspan="4">4、测绘工期进度情况：</th></tr>
              <tr>
                <td v-for="item in surveyItems">
                  <span v-if="item.value === achInfo.gradeProgress" class="redspan">☑{{item.name}}</span>
                  <span v-else>{{item.name}}</span>
                </td>
              </tr>
              <tr><th colspan="4">5、测绘人员的技术熟练程度：</th></tr>
              <tr>
                <td v-for="item in surveyItems">
                  <span v-if="item.value === achInfo.gradeProficiency" class="redspan">☑{{item.name}}</span>
                  <span v-else>{{item.name}}</span>
                </td>
              </tr>
            </table>
          </div>
          <div><strong>客户建议：</strong>{{achInfo.clientAdvice}}</div>
          <div><strong>填写来源：</strong>{{achInfo.origin}}</div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!--成果编辑-->
    <el-card style="margin-top: 20px;">
      <div slot="header" class="clearfix" >
        <div class="ach_title">
          <span class="span_title">成果确认清单</span>
        </div>
      </div>
      <div>
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
          <el-form-item label="项目名称：" prop="projectNickname">
            <el-input v-model="dataForm.projectNickname"></el-input>
          </el-form-item>
          <el-form-item label="客户公司名称：" prop="clientName">
            <el-input v-model="dataForm.clientName"></el-input>
          </el-form-item>
          <el-form-item label="成果清单：">
            <el-table border :data="dataForm.achList" :header-cell-style="{background: 'dodgerblue',color: '#fff'}" >
              <el-table-column prop="seqNum" header-align="center" align="center" label="序号" width="80"></el-table-column>
              <el-table-column prop="billName" header-align="center" align="center" label="成果名称"></el-table-column>
              <el-table-column prop="billNo" header-align="center" align="center" label="成果编号" width="100"></el-table-column>
              <el-table-column prop="spec" header-align="center" align="center" label="规格" width="180"></el-table-column>
              <el-table-column prop="style" header-align="center" align="center" label="样式" width="150"></el-table-column>
              <el-table-column prop="num" header-align="center" align="center" label="数量(份)" width="100"></el-table-column>
              <el-table-column prop="remark" header-align="center" align="center" label="备注" width="100"></el-table-column>
              <el-table-column  header-align="center" align="center" label="操作" width="80">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.checked"></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="清单确认情况：">
            <el-tag type="primary" size="small" v-if="sitEntity.isAach">已确认</el-tag>
            <el-tag type="info" size="small" v-else>未确认</el-tag>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="bottom_btn">
      <el-button type="primary" size="large" icon="el-icon-s-order" @click="dataFormSubmit">确认成果</el-button>
      <el-button type="success" size="large" icon="el-icon-printer" @click="exportWordHandle"
                 :loading="dataListLoading" :disabled="sitEntity.isAach !== 1">导出</el-button>
      <el-button type="warning" size="large" icon="el-icon-back" @click="goBack">返回</el-button>
    </div>

    <!-- 弹窗, 新增 / 修改  编辑客户签收单-->
    <authach-add-or-update v-if="editAchVisible" ref="authachAddOrUpdate" @refreshDataList="init"></authach-add-or-update>
  </div>
</template>

<script>
import {closeTab} from '@/utils/tabs'
import {stringIsNull} from '@/utils'
import authachAddOrUpdate from './editauthach-add-or-update'

export default {
  data () {
    return {
      dataForm: {
        projectNo: '',
        projectNickname: '',
        clientName: '',
        achList: []
      },
      dataListLoading: false,
      sitEntity: {},
      dataRule: {
        projectNo: [
          { required: true, message: '项目编号不能为空', trigger: 'blur' }
        ],
        projectNickname: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        clientName: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
      },
      getArgsPageIndex: this.$route.query.pageIndex,
      getArgsPageSize: this.$route.query.pageSize,
      proLoading: false,
      dataLoading: false,
      projectNo: '',
      reportTitle: '',
      projectInfo: '',
      achInfo: '',
      isSign: 0,
      editAchVisible: false,
      surveyItems: [
        {value: 20, name: '非常满意'},
        {value: 18, name: '满意'},
        {value: 14, name: '基本满意'},
        {value: 10, name: '不满意'}
      ]
    }
  },
  components: {
    authachAddOrUpdate
  },
  computed: {
    argsPageIndex: {
      get () { return this.$store.state.paramsutil.argsPageIndex },
      set (val) { this.$store.commit('paramsutil/updateargsPageIndex', val) }
    },
    argsPageSize: {
      get () { return this.$store.state.paramsutil.argsPageSize },
      set (val) { this.$store.commit('paramsutil/updateargsPageSize', val) }
    }
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.projectNo = this.$route.query.projectNo
      this.dataForm.projectNo = this.$route.query.projectNo
      this.getInfoByProjectNo(this.projectNo).then( info => {
        this.projectInfo = info
        this.getLastExpachList().then(voList => {
          if (voList.length > 0) {
            voList[voList.length - 1].checked = true
          }
          this.dataForm.achList = voList
          this.getAuthach().then(data => {
            this.sitEntity = data.sitEntity
            if (stringIsNull(data.projectAuthach)) {
              this.dataForm.projectNickname = info.projectName
              this.dataForm.clientName = info.projectAuthorize
            } else {
              this.dataForm.projectNickname = data.projectAuthach.projectNickname
              this.dataForm.clientName = data.projectAuthach.clientName
              this.achInfo = data.projectAuthach
              this.isSign = data.isSign
            }
          })
        })
      })
    },
    // 获取项目基本信息
    getInfoByProjectNo (projectNo) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/projectInfo/info/${projectNo}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data.projectInfo)
          } else {
            this.$message.error(data.msg)
            reject(data.msg)
          }
        })
      })
    },
    // 获取确认清单
    getAuthach () {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/authach/info/${this.dataForm.projectNo}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data)
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 获取最后一次成果清单
    getLastExpachList () {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/expach/lastList`),
          method: 'get',
          params: this.$http.adornParams({
            projectNo: this.dataForm.projectNo
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data.list)
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 编辑客户
    editClientHandle () {
      this.editAchVisible = true
      this.$nextTick(() => {
        this.$refs.authachAddOrUpdate.init(this.dataForm.projectNo)
      })
    },
    // 导出Word接口
    exportWordHandle () {
      this.dataListLoading = true
      // 打钩的清单才要导出
      let formData = {
        authachEntity: {
          projectNo: this.projectNo,
          projectNickname: this.dataForm.projectNickname,
          clientName: this.dataForm.clientName
        },
        achList: this.dataForm.achList
      }
      this.$http({
        url: this.$http.adornUrl('/project/authach/exportWord'),
        method: 'post',
        data: this.$http.adornData(formData),
        withCredentials: false, // 允许携带cookie
        responseType: 'blob'
      }).then(({data}) => {
        console.log(data)
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(data) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = this.dataForm.projectNickname + '.doc' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
        this.dataListLoading = false
      })
    },
    // 确认成果
    dataFormSubmit () {
      let authach = {
        projectNo: this.projectNo,
        projectNickname: this.dataForm.projectNickname,
        clientName: this.dataForm.clientName
      }
      this.$http({
        url: this.$http.adornUrl('/project/authach/save'),
        method: 'post',
        data: this.$http.adornData({
          authachEntity: authach,
          achList: this.dataForm.achList
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
          this.init()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 返回
    goBack () {
      closeTab('project-editauthach')
      this.argsPageSize = this.getArgsPageSize
      this.argsPageIndex = this.getArgsPageIndex
      this.$router.push('project-project')
    }
  },
  watch: {
    '$route': function (to, from) {
      this.projectNo = to.query['projectNo']
      // 执行数据更新查询
      if (to.name === 'project-editauthach') {
        this.init()
      } else {
        closeTab('project-editauthach')
      }
    }
  }
}
</script>


<style lang="scss" scoped>
@import "src/assets/scss/_variables.scss";
.span_title {
  font-size: 18px;
  font-weight: 700;
}
.span_title:hover{
  color: $--color-primary;
}
.ach_title{
  padding: 0;
  justify-content: space-between;
  display: flex
}
.bottom_btn{
  margin: 20px;
  width: 100%;
  text-align: center;
}
.sig_line {
  display:flex;
  vertical-align: top;
}
.title_line {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.sig_table {
  text-align: left;
  th {
    padding: 2px;
    font-size: 11pt;
  }
  td {
    text-align: center;
    padding: 1px;
    width: 120px;
  }
  .redspan {
    color: red;
  }
}
.img_cap {
  border: 1px solid $--color-primary;;
  max-width: 200px;
}
</style>
